<!--
 * @Description: 
 * @Date: 2025-09-17 09:44:54
 * @LastEditTime: 2025-10-09 16:02:01
-->
<template>
    <!-- <van-nav-bar title="延移智问"></van-nav-bar> -->
    <div class="smart w-100vw h-100vh p-20px">
        <div class="smart-header">
            <p class="text-30px font-bold color-#fff text-left">延移智问</p>
            <div class="qiPao h-180px py-20px ">
                <p class="ml-40px text-20px font-bold color-#081C69 mb-15px text-center">你好，我是小延延~</p>
                <div class="py-10px  px-20px flex flex-col gap-15px">
                    <div class="w-100% flex justify-between">
                        <span class="text-12px px-10px py-2px border-rd-10  bg-#DDE9FE">用户画像</span>
                        <span class="text-12px px-10px py-2px border-rd-10  bg-#DDE9FE">营销话术</span>
                        <span class="text-12px px-10px py-2px border-rd-10  bg-#DDE9FE">业务推荐</span>
                        <span class="text-12px px-10px py-2px border-rd-10  bg-#DDE9FE">知识问答</span>
                    </div>
                    <div class="w-100% border-rd-10 overflow-hidden bg-transparent" style="border:2px solid #75A8FF">
                        <van-search
                            class="w-100% bg-transparent!   box-border p-0!    focus:outline-none input-focus transition-all"
                            v-model="inputValue" placeholder="点击输入聊天内容" wrap-with-form 
                             show-action>
                            <template #action>
                               
                                <!-- <van-button class="h-110%"  icon="down" :disabled="loading" round size="small" type="primary"
                                @click="handleSubmit" /> -->
                                <div @click="handleBlur">发送</div>
                            </template>
                        </van-search>
                        <!-- <input v-model="inputValue" type="text" inputmode="text" placeholder="点击输入聊天内容"
                            class="w-100%  box-border px-15px py-5px border-rd-10  focus:outline-none input-focus transition-all"
                            style="border:2px solid #75A8FF" @blur="handleBlur"></input>
                            <van-button  class="absolute! top-2px right-2px " icon="back-top" :disabled="loading"  round size="small" type="primary"
                        @click="handleSubmit" /> -->
                    </div>

                </div>
            </div>
        </div>
        <p class="text-18px font-bold color-#000 text-left">智能工具</p>
        <div>
            <div class="h-100px w-100%  relative flex items-center "
                v-for="(target, index) in menuList">
                <img class="w-100% h-100% absolute top-0 left-0 z-1" :src="imgs[index]" /></img>
                <div class="flex flex-1 justify-between z-100 px-30px"  @click="handleSkip(target.url, target.path)">
                    <div class="mt-25px">
                        <span :style="{ color: target.color }" class=" font-bold text-14px">{{
                            target.title }}</span>
                    </div>
                    <div class="flex w-55% flex-col  items-start mt-5px">
                        <span class="color-#000 font-bold text-16px">{{ target.title }}</span>
                        <span class="w-100% text-left color-#98A0B3 container  text-12px overflow-hidden">{{
                            target.content }}</span>
                    </div>
                    <div class="mt-15px ">
                        <span :style="{ color: index % 2 == 0 ? '#258AA4' : '#9553FF' }"
                            class="  border-rd-10px "><van-icon name="arrow" size="20" /></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>
<script setup>
import kuai1 from "../assets/img/kuai1.png"
import kuai2 from "../assets/img/kuai2.png"
import kuai3 from "../assets/img/kuai3.png"
import kuai4 from "../assets/img/kuai4.png"
import kuai5 from "../assets/img/kuai5.png"

import { useRouter } from "vue-router";
import { ref, onMounted, onUnmounted } from "vue"
import { Toast } from "vant";
const imgs = [kuai1, kuai2, kuai3, kuai4, kuai5]
const inputValue = ref()
const menuList = [
    {
        title: "拓客星睿",
        content: "客户画像和营销策略输出",
        url: "/dialogueBox",
        path: "yhhx",
        color: "#258AA4"
    },
    {
        title: "工单巧语",
        content: "聚焦个性化营销话术",
        url: "/dialogueBox",
        path: "xiaoxi",
        color: "#9553FF"
    },
    {
        title: "智识快答",
        content: "专注知识问答，提供业务方案",
        url: "/dialogueBox",
        path: "zhihui",
        color: "#7AEB80"
    },
    {
        title: "政企慧能",
        content: "聚焦政企赋能,客户画像",
        url: "/dialogueBox",
        path: "zhengqi",
        color: "#F7696B"
    },
    {
        title: "靓号精灵",
        content: "整合靓号资源，发掘优质号码",
        url: "/choosePhone",
        path: "jihao",
        color: "#716EF9"
    },
]
const router = useRouter();



const handleSkip = (url, path) => {
    if (path == 'xiaoxi' || path == 'zhengqi') {
        return Toast.fail("该功能暂未开发！")
    }
    router.push(`${url}?path=${path}`)
}
const handleBlur = (val) => {
    if (inputValue.value) {
        router.push(`/dialogueBox?path=wenda&content=${inputValue.value}`)
    }
    //
}

</script>
<style scoped>
.smart {

    background-image: url("../assets/img/bgimg.png");
    background-size: cover;

}

.qiPao {
    background-image: url("../assets/img/hbg.png");
    background-size: 100% 100%;

}

.container {
    overflow: hidden;
    /* 隐藏溢出的内容 */
    text-overflow: ellipsis;
    /* 溢出时显示省略号 */
    white-space: nowrap;
    /* 阻止文本换行 */

}
:deep(.van-search__content){
    background: transparent;
}
/* :deep(.van-search__content){
    background: transparent;
}
:deep(.van-search__action){
    line-height: 0;
    padding: 0;
    transform: rotate(-90deg);
  
} */
</style>